<template>
 	<view class="contain">
 		<view class="nav_cont">
 			<view class="nav_title">
 				<view class="nav_font" v-for="(item,index) of nav_list"  :key='index' @tap="nav_click(index)">
 					<text :class="navIndex==index ?'font_item' : null">{{item}}</text>
 				</view>
 			</view>
 			<view class="collect">
 				<u-icon name="star-fill" color="#F8321D" size="32"></u-icon>
 				<text style="font-size: 28rpx;margin-left:5rpx">收藏</text>
 				
 			</view>
 		</view>
 		<view class="img_cont">
 			<swiper class="good_swiper" :autoplay="true" :interval="3000" :duration="1000">
 				<swiper-item>
 					<view class="swiper-item">
 						<image src="@/static/image/banner2.png" mode="" class="good_img"></image>
 					</view>
 				</swiper-item>
 			</swiper>
 		</view>
 	<view class="goods_contain">
 		
 		<view class="good_info_cont">
 			<view class="good_title">
 				{{detail.name}}
 			</view>
 			<view class="callcont">
 				<view class="call">
 					{{detail.desc}}
 				</view>
 				
 			</view>
 		</view>
 		<view class="good_type_cont">
 			<view class="type_item" v-for="(item,index) of good_type" :key = "index">
 				<view class="type_title">
 					{{item.type}}
 				</view>
 				<view 
 				:class="item.selected == idx?'good_type':'good_type_selected'
 				"v-for="(items,idx) of item.type_selec"
 				:key="idx" 
 				@tap="selectType(index,idx)"
 				>
 					{{items}}
 				</view>
 			</view>
 		</view>
 		<view class="goods_show" v-for="n of 5">
 			<view class="goods_item">
 				
 			</view>
 			
 		</view>
 	</view>
 	
 	<view class="footer">
 		<view class="footTop">
 			<view class="totalprice">
 				<view class="price">
 					<view class="price_num">
 						￥{{detail.price|Int }}.<text style="font-size: 24rpx;">{{detail.price|duts}}</text>
 					</view>
 					<text class="subTitle">{{detail.label}}</text>
 				</view>
 			</view>
 			<view class="add_tool">
 				<u-icon name="minus-circle" size="57" color="#EAEAEA"></u-icon>
 				<view class="good_num">
 					0
 				</view>
 				<u-icon name="plus-circle" size="57" color="#EAEAEA"></u-icon>
 			</view>
 			
 		</view>
 		<view class="foot_bottom">
 			<view class="count">
 				优惠： <text style="color: #000000;">当前购物车</text> 已优惠 
 				<text class="price_Int">￥300.</text>
 				<text class="price_float">00</text>
 			</view>
 			<view class="toDetail">
 				查看优惠详情
 				<u-icon name="arrow-right" size="24" color="#BFBFBF"></u-icon>
 			</view>
 			
 		</view>
 	<submitBar></submitBar>
 	</view>
 		
 	</view>
 </template>
 
 <script>
 	import addbtn from '@/plugins/add_btn/add_btn.vue'
 	export default {
 		data() {
 			return {
 				nav_list:['产品','评价'],
 				navIndex:0,
 				
 				good_type:[
 					{
 						type:"温度",
 						"selected":0,
 						type_selec:["冰","常温"],
 							
 					},
 					{
 						type:"糖度",
 						"selected":0,
 						type_selec:["泉塘","半糖"],
 							
 					}
 				],
 				detail:{
 					name:"史密斯（A,O,Smith）16升热水器",
 					desc:"热销榜单描述描述描述",
 					price:4300.28,
 					label:"使用说明测试测试"
 					
 				}
 			}
 		},
 		methods: {
 			nav_click(index){
 				this.navIndex=index
 			},
 			selectType(index,idx){
 				this.good_type[index].selected = idx
 			},
 			
 		}
 	}
 </script>
 
 <style scoped lang="scss">
 	$padboth:30rpx;
 	$topspace:20rpx;
 	$footTop:170rpx;
 	page{
 		display: flex;
 		box-sizing: border-box;
 	}
 	.contain{
 		display: flex;
 		background-color: #F5F5F5;
 		flex-direction: column;
 		padding-bottom:320rpx;
 		.nav_cont{
 			width: 100%;
 			height: 90rpx;
 			background: #fff;
 			box-sizing: border-box;
 			display: flex;
 			justify-content: space-between;
 			padding: 26rpx 38rpx 0 32rpx;
 			.nav_title{
 				height: 100%;
 				display: flex;
 				margin-right: 26rpx;
 				color: #686867;
 				font-size: 28rpx;
 				.nav_font{
 					margin-right: 26rpx;
 					.font_item{
 						border-bottom: 2px solid gold;
 						font-weight: 700;
 						color: #000;
 					}
 				
 					
 				}
 			}
 			.collect{
 				height: 100%;
 				color: #F8321D;
 			}
 		}
 		.img_cont{
 			width: 100%;
 			height: 304rpx;
 			background-color: pink;
 			.good_swiper{
 				height:100%;
 				width:100%;
 				.swiper-item{
 					height: 100%;
 					width: 100%;
 				.good_img{
 					width: 100%;
 					height: 100%;
 				}
 				}
 			}
 			
 		}
 		.goods_contain{
 			display: flex;
 			flex-direction: column;
 			width: 100%;
 			
 			margin-top: $topspace;
 			box-sizing: border-box;
 			padding: 0 $padboth 0 $padboth;
 			.good_info_cont{
 				width: 100%;
 				height:120rpx;
 				background-color: #fff;
 				box-sizing: border-box;
 				padding: 23rpx 23rpx 32rpx;
 				.good_title{
 					font-size: 28rpx;
 					font-weight: 700;
 				}
 				.callcont{
 					width: 100%;
 					margin-top: 15rpx;
 					display: flex;
 					
 				
 					.call{
 						font-size: 20rpx;
 						display: flex;	
 						border-radius: 10px;
 						height: 30rpx;
 						margin-right: 8rpx;
 						color: #909190;
 					
 					}
 				}
 			}
 			.good_type_cont{
 				width: 100%;
 				margin-top: $topspace;
 				background: #fff;
 				display: flex;
 				flex-direction: column;
 				padding: 0rpx 23rpx 32rpx ;
 				box-sizing: border-box;
 				.type_item{
 					display: flex;
 					width: 100%;
 					height: 100%;
 					align-items: center;
 					margin-top: 24rpx;
 					.type_title{
 						color: #5B5959;
 						font-size: 27rpx;
 						margin-right: 17rpx;
 						height: 100%;
 						display: flex;
 						align-items: center;
 					}
 					.good_type{
 						margin-left: 19rpx;
 						width: 143rpx;
 						height: 51rpx;
 						text-align: center;
 						border-radius: 20px;
 						line-height:51rpx;
 						font-size: 24rpx;
 						color: #4863EA;
 						border:1px solid #4863EA
 					}
 					.good_type_selected{
 							margin-left: 19rpx;
 							width: 143rpx;
 							height: 51rpx;
 							text-align: center;
 							border-radius: 20px;
 							line-height:51rpx;
 							font-size: 24rpx;
 							color: #5B5959;
 							background-color: #F5F5F5;
 					}
 				}
 				
 			}
 			.goods_show{
 				background-color: #fff;
 				margin-top: $topspace;
 				display: flex;
 				flex-direction: column;
 				box-sizing: border-box;
 				padding: 40rpx 30rpx 32rpx 26rpx;
 				.goods_item{
 					background-color: pink;
 					width: 100%;
 					margin-bottom: 22rpx;
 					height: 300rpx;
 				}
 			}
 		}
 		.footer{
 			width: 100%;
 			display: flex;
 			flex-direction: column;
 			box-sizing: border-box;
 			background-color: #FBF8E4;
 			position: fixed;
 			z-index: 999;
 			bottom:0;
 			.footTop{
 				width: 100%;
 				height: 50%;
 				display: flex;
 				box-sizing: border-box;
 				justify-content: space-between;
 				padding: 28rpx $padboth 0;
 				.totalprice{
 					height: 100%;
 					.price{
 						font-size: 34rpx;
 						font-weight: 900;
 						height: 100%;
 						color: #F8321D;
 						display: flex;
 						
 						flex-direction: column;
 						.subTitle{
 							font-size: 20rpx;
 							color: #999999;
 							margin-top: 5rpx;
 						}
 					}
 				}
 				.add_tool{
 					display: flex;
 					height: 42rpx;
 					width: 161rpx;
 					position: relative;
 					border: 3px solid #EAEAEA;
 					border-left: none;
 					border-right: none;
 					background-color: #FFFFFF;
 					line-height: 42rpx;
 					text-align: center;
 					border-radius:40rpx;
 					u-icon{
 						position:absolute;
 						top: -8rpx;
 						&:first-child{
 							left: -5rpx;
 						}
 						&:last-child{
 							right: -5rpx;
 						}
 					}
 					.good_num{
 						margin:0 24rpx;
 						width:100%;
 						text-align: center;
 					}
 				}
 				
 			}
 			.foot_bottom{
 			
 				padding:  $padboth ;
 				box-sizing: border-box;
 				display: flex;
 				justify-content: space-between;
 				height: 50%;
 				.count{
 					font-size: 27rpx;
 					color: #666666;
 					.price_Int{
 						color: #F8321D;
 					}
 					.price_float{
 						color: #f8321D;
 						font-size: 24rpx;
 					}
 				}
 				.toDetail{
 					font-size: 24rpx;
 					color: #f8321D;
 					margin-left: 22rpx;
 				}
 			}
 		}
 	}
 </style>
 